<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
  <mdl-layout-header>
    <mdl-layout-header-row>
      <mdl-layout-title>
        <img src="../../assets/images/login/title.png" style="height:50px;margin: 0 15px 0 15px;" />
      </mdl-layout-title>
      <mdl-layout-spacer></mdl-layout-spacer>
      <nav class="mdl-navigation">
        <qk-weather></qk-weather>
        <qk-profile-icon [style]=" {'margin-right': '75px', 'height': '45px', 'width': '45px'}"></qk-profile-icon>
        <qk-logout></qk-logout>
      </nav>
    </mdl-layout-header-row>
  </mdl-layout-header>
  <mdl-layout-content mdl-shadow="16">
    <div class="sys-icon-container">
      <div *ngFor="let nav of sysNavs">
        <span *ngIf="nav.tasks > 0" class="sys-icon-prompt" [mdl-badge]="nav.tasks" mdl-badge-overlap></span>
        <div class="sys-icon ripple sys-icon-animation sys-icon-{{nav.iconImage}}" mdl-shadow="8"
          (click)="specifySys(nav.sysPath, nav.sysId)">
        </div>
        <div class="sys-title">{{nav.sysName}}</div>
      </div>
    </div>
  </mdl-layout-content>
</mdl-layout>
<div class="footer">
  <qk-notice-icon></qk-notice-icon>
  <qk-toolbar></qk-toolbar>
</div>